<template>
  <div class="prop">
    <el-tabs v-model="activeName">
      <el-tab-pane label="节点配置" name="1">
        <span slot="label">节点配置<i class="el-icon-setting" /></span>
        <component
          :is="getComponent"
          v-if="element"
          :element="element"
          :bpmn-modeler="bpmnModeler"
          :btn-options="btnOptions"
          :form-size="formSize"
          :form-property="formProperty"
        />
        <el-empty v-else :image-size="50" description="请选择节点" />
      </el-tab-pane>
      <el-tab-pane label="流程配置" name="2">
        <processPanel
          v-if="processElement"
          :form-size="formSize"
          :element="processElement"
          :bpmn-modeler="bpmnModeler"
          :form-property="formProperty"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import taskPanel from './pannel/task'
import startEndPanel from './pannel/startEnd'
import processPanel from './pannel/process'
import sequenceFlowPanel from './pannel/sequenceFlow'
import gatewayPanel from './pannel/gateway'
import subProcessPanel from './pannel/subProcess'

export default {
  name: 'PropertyPanel',
  components: { processPanel, taskPanel, startEndPanel, sequenceFlowPanel, gatewayPanel, subProcessPanel },
  props: {
    bpmnModeler: {
      type: Object,
      required: true
    },
    btnOptions: {
      type: Array,
      default: () => []
    },
    formSize: {
      type: String,
      default: 'mini'
    },
    formProperty: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      element: null,
      processElement: null,
      activeName: '2',
      formData: {}
    }
  },
  computed: {
    getComponent() {
      const type = this.element ? this.element.type : undefined
      if (['bpmn:IntermediateThrowEvent', 'bpmn:StartEvent', 'bpmn:EndEvent'].includes(type)) {
        return 'startEndPanel'
      }
      if ([
        'bpmn:UserTask',
        'bpmn:Task',
        'bpmn:SendTask',
        'bpmn:ReceiveTask',
        'bpmn:ManualTask',
        'bpmn:BusinessRuleTask',
        'bpmn:ServiceTask',
        'bpmn:ScriptTask'
      ].includes(type)) {
        return 'taskPanel'
      }
      if (type === 'bpmn:SequenceFlow') {
        return 'sequenceFlowPanel'
      }
      if (['bpmn:InclusiveGateway', 'bpmn:ExclusiveGateway', 'bpmn:ParallelGateway', 'bpmn:EventBasedGateway'].includes(type)) {
        return 'gatewayPanel'
      }
      if (['bpmn:SubProcess'].includes(type)) {
        return 'subProcessPanel'
      }
      return null
    }
  },
  mounted() {
    this.handleModeler()
  },
  methods: {
    handleModeler() {
      this.bpmnModeler.on('root.added', e => {
        if (e.element.type === 'bpmn:Process') {
          this.element = null
          this.$nextTick().then(() => {
            this.processElement = e.element
          })
        }
      })
      this.bpmnModeler.on('element.click', e => {
        const { element } = e
        if (element.type === 'bpmn:Process') {
          this.processElement = element
          this.activeName = '2'
        } else {
          this.activeName = '1'
        }
      })
      this.bpmnModeler.on('selection.changed', e => {
        // hack 同类型面板不刷新
        this.element = null
        const element = e.newSelection[0]
        if (element) {
          this.$nextTick().then(() => {
            this.element = element
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .prop {
    padding-top: 10px;
  }
  /deep/.el-tabs__nav {
    min-width: 100%;
    display: flex;
    flex: 1;
  }
  /deep/.el-tabs__item {
    flex: 1;
    text-align: center;
  }
  /deep/.el-tabs__header{
    margin: 0;
  }
  /deep/.el-collapse-item__content {
    padding-bottom: 10px;
  }
</style>
